<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>管理员登录界面</title>
<link rel="stylesheet" href="css/style.css">
<script type="text/javascript" src="js/jquery.js"></script>
<!-- 注意一下引入顺序 -->
<script src="js/jquery-2.0.3.js"></script>
<script src="js/jquery.cookie.js"></script>
<script type="text/javascript">
	function changeYZM() {
		//获取图片，修改图片的地址
		$("#YZM").attr("src", "random.jpg?time=" + new Date().toLocaleString());
	}
</script>
</head>
<body>
	<header>
		<nav class="b_clear">
			<div class="nav_logo l_float">
				<img src="imgs/logo3.jpg" alt="" style="width: 60px; height: 60px;">
			</div>
			<div class="nav_link r_float">
				<ul>
					<li><a href="#">关于我们</a></li>
				</ul>
			</div>
		</nav>
	</header>
	<div class="container">
		<div class="login_body l_clear">
			<div class="login_form l_float">
				<div class="login_top">
					<div class="login_tags b_clear">
					<span class="top_tag l_float active" >管理员</span>
						<span class="top_tag l_float active" onClick="PwdLogin()">密码登录</span>
					</div>
				</div>
				<div class="login_con">
					<form action="AdminLoginServlet" method="POST">
						<div>
							<label for="user_name">用户名</label> <input type="text"
								name="adminname" id="adminname" placeholder="请输入账号" required>
							<img src="imgs/icons/user.svg">
							<p class="tips hidden">请检查您的账号</p>
						</div>
						<div>
							<label for="user_pwd">密码</label> <input type="password"
								name="adminpsw" id="adminpsw" placeholder="请输入密码" required>
							<img src="imgs/icons/lock.svg">
							<p class="tips hidden">请检查您的密码</p>
						</div>
						<div class="b_clear">
							<label for="auth_code" class="b_clear">验证码</label> <input
								type="text" name="YZM" id="" placeholder="请输入验证码"
								class="l_float" maxlength="6"> <img src="random.jpg"
								id="YZM" onclick="changeYZM()"
								style="margin-left: 150px; width: 100px;"100px;">
						</div>
						<!-- 隐藏域传递op的值给servlet，会根据op的值判断后续的操作 -->
						<input type="hidden" name="op" value="admin_login">
						<p><input type="checkbox" value="rememberme" name="cksremember"
						id="cksremember" checked>记住密码</p>
						<div class="b_clear submit" style="text-align:center">

							<button type="submit">登&nbsp;&nbsp;录</button>
							<a href="#" class="r_float">忘记密码？</a>
							<p class="tips hidden">登录失败，请检查您的账户与密码</p>
						</div>
					</form>
				</div>
				
				<div class="login_otherAccount">
					<span>第三方登录</span> <a href="http://"><img
						src="imgs/icons/wechat.svg" alt="微信登录"></a> <a href="http://"><img
						src="imgs/icons/weibo.svg" alt="微博登录"></a> <a href=""><img
						src="imgs/icons/qq.svg" alt="QQ登录"></a>
				</div>

			</div>
			<div class="login_ad l_float" style="border: 0px;">
				<a href=""></a>
			</div>
		</div>
		<div class="footer">
			<p>
				Copyright © 2020 <a href="#">与食俱进</a>
			</p>

		</div>
	</div>
<script>
	$(function() {
		//("#adminname").blur 文本框失去焦点事件
		$("#adminname").blur(function() {
			//读取用户名和密码的cookie信息
			var adminname = $.cookie('adminname');
			var adminpsw = $.cookie('adminpsw');

			console.log(adminpsw);
			//如果用户输入的用户名 和 读取用户名一致
			if ($(this).val() == adminname) {
				//将密码显示在密码框中
				$("#adminpsw").val(adminpsw);
			}

		});

	})
</script>
	<script src="js/login.js"></script>
</body>
</html>
